<template>
  <me-table :data="state.list" :height="300" :pagination="pagination" @current-change="pageSizeChange" :handle="{
    delete: del
  }">
    <el-table-column prop="user" label="用户">
      <template #default="{ row }">
        <span>{{ row.user.nickname }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="price" label="图片" width="300">
      <template #default="{ row }">
        <div>
          <el-image class="img" v-for="item in row.pictures" :key="item.url" :src="item.url"></el-image>
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="content" label="内容" />
    <el-table-column prop="state" label="状态">
      <template #default="{ row }">
        <el-tag>{{ newsState[row.state] }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="createTime" label="创建时间" />
  </me-table>
</template>

<script setup lang="ts">
import { onMounted, reactive } from 'vue';
import { getList as getNewsList, delNews } from '@/axios/api/news'
import { newsState } from '@/enum'

const state = reactive({
  list: []
})

const pagination = reactive({
  total: 0,
  index: 1,
  size: 20
})

const getList = () => {
  getNewsList(pagination.index, pagination.size).then((res: any) => {
    state.list = res.records
    pagination.total = res.total
  })
}

onMounted(() => {
  getList()
})

const del = (id: string) => {
  delNews(id).then(() => {
    getList()
  })
}

const pageSizeChange = (index: number) => {
  pagination.index = index
  getList()
}
</script>

<style scoped>
</style>